<template>
    <div class="progress">
        <div class="progress-data">
            <h4>
                <span>Real-time POD points balance</span>
                <a @click="dialog = true">Learn more</a>
            </h4>

            <div class="progress-data-compute">
                <strong :label="getMonthAllName(-2)" v-text="getPriceFormat(data.two_month_ago_sale)"></strong>
                <span text="+"></span>
                <strong :label="getMonthAllName(-1)" v-text="getPriceFormat(data.one_month_ago_sale)"></strong>
                <span text="+"></span>
                <strong :label="getMonthAllName(0)" v-text="getPriceFormat(data.cur_month_ago_sale)"></strong>
                <span text="="></span>
                <strong class="compute-total" :class="'level-' + this.percentageLevel" label="Total"
                        v-text="getPriceFormat(data.total)"></strong>
            </div>
            <div class="progress-data-graph">

                <ul :level="labelLevel">
                    <li v-for="item in showLabel" :key="item.discount" :level="item.level"
                        :class="{ active: item.level == labelLevel }">
                        <span v-text="item.sales_label"></span>
                        <strong :style="{ width: item.percent + '%' }">
                            <b v-text="(data.total / 100).toFixed(2)"></b>
                        </strong>
                        <figure>
                            <img v-if="item.level == 1"
                                 src="https://img.podpartner.com/static/images-20230202/user-progress-icon1.png"
                                 alt="" />
                            <img v-if="item.level == 2"
                                 src="https://img.podpartner.com/static/images-20230202/user-progress-icon2.png"
                                 alt="" />
                            <img v-if="item.level == 3"
                                 src="https://img.podpartner.com/static/images-20230202/user-progress-icon3.png"
                                 alt="" />
                            <img v-if="item.level == 4"
                                 src="https://img.podpartner.com/static/images-20230202/user-progress-icon4.png"
                                 alt="" />
                            <em v-text="item.discount_label + ' off'"></em>
                        </figure>
                    </li>
                </ul>

            </div>
        </div>
        <div class="progress-result">
            <h4 v-if="percentageLevel == 1">Discount Available Soon</h4>
            <h4 v-else>Discounts currently available</h4>
            <figure>
                <img v-if="percentageLevel == 1" src="@/assets/images/dashboard/dashboard-progress1.png" alt="" />
                <img v-if="percentageLevel == 2" src="@/assets/images/dashboard/dashboard-progress2.png" alt="" />
                <img v-if="percentageLevel == 3" src="@/assets/images/dashboard/dashboard-progress3.png" alt="" />
                <img v-if="percentageLevel == 4" src="@/assets/images/dashboard/dashboard-progress4.png" alt="" />
                <img v-if="percentageLevel == 5" src="@/assets/images/dashboard/dashboard-progress5.png" alt="" />
                <img v-if="percentageLevel == 6" src="@/assets/images/dashboard/dashboard-progress6.png" alt="" />
                <img v-if="percentageLevel == 7" src="@/assets/images/dashboard/dashboard-progress7.png" alt="" />
                <!-- <img :src="'https://img.podpartner.com/static/images-20230202/user-progress' +getLevelUrl +'.png'" alt="" /> -->
            </figure>
            <p v-if="percentageLevel == 1">Keep going!</p>
            <p v-else v-text="percentageDiscount"></p>
        </div>
        <UxDialog class="progress-dialog" :visible="dialog" @close="close()">
            <h3>What is PODpartner Loyalty Program?</h3>
            <p>We offer a 4-tier loyalty program to reward our customers. Please see below how it works.</p>
            <h4>1. Earn POD points</h4>
            <div class="progress-dialog-points">
                <span>Whenever you pay for an order at PODpartner, you gain POD points. </span>
                <strong>POD points = Total spend - branding fee - shipping cost - tax</strong>
                <em>(Branding fee includes the cost of packaging bag and hang tag.)</em>

                <span>Your real-time POD points balance is calculated based on the total points you earned within the
                    last three calendar months.</span>
                <span>For example, if you have gained a total of 800 points during April and May, plus another 200
                    points by June 10, your real-time balance on June 10 will become 1000 points. But once July starts,
                    the real-time balance will be recalculated based on your total points in May, June, and July.</span>

            </div>

            <h5>Example 1</h5>
            <figure>
                <img src="@/assets/images/dashboard/dashboard-progress-more1.png" alt="">
            </figure>
            <h5>Example 2</h5>
            <figure>
                <img src="@/assets/images/dashboard/dashboard-progress-more2.png" alt="">
            </figure>
            <h4>2. Enjoy discounts</h4>
            <p>As soon as your real-time POD points balance reaches a certain tier, e.g., 1000 points, you will be
                rewarded with a corresponding 3% discount on all following orders during the current month, calculated
                on the total of the product plus packaging and hangtag costs.</p>
            <p>Keep in mind that the rewarded discount is always dynamic, meaning the higher tier you reach, the bigger
                discount you trigger.</p>

            <table>
                <tbody>
                    <tr>
                        <th>Membership Tier</th>
                        <td><img src="@/assets/images/dashboard/dashboard-progress2.png" alt=""></td>
                        <td><img src="@/assets/images/dashboard/dashboard-progress3.png" alt=""></td>
                        <td><img src="@/assets/images/dashboard/dashboard-progress4.png" alt=""></td>
                        <td><img src="@/assets/images/dashboard/dashboard-progress5.png" alt=""></td>
                    </tr>
                    <tr>
                        <th>Discounts</th>
                        <td>3% Off</td>
                        <td>5% Off</td>
                        <td>6% Off</td>
                        <td>8% Off</td>
                    </tr>
                    <tr>
                        <th>Earned points</th>
                        <td>1K</td>
                        <td>3K</td>
                        <td>7K</td>
                        <td>25K</td>
                    </tr>
                </tbody>
            </table>
            <h4>3. Extra perk</h4>
            <p>If your real-time POD points balance exceeds 50,000, bravo! Get in touch with our support team and claim
                a special reward.</p>
        </UxDialog>
    </div>
</template>

<script>
export default {
    name: "UserDiscountProgress",
    props: ["data"],
    data () {
        return {
            month: {
                cur: "",
                one: "",
                two: "",
            },
            dialog: false,
        };
    },
    computed: {


        // 显示位置
        showLabel () {
            const show_label = this.data.show_label || []
            if (show_label.length > 0) {

                const list = []
                // const first = show_label[0];
                // if (this.data.level == 1) {
                //     list[0].show = true;
                //     list[0].percent = Math.min(100, Math.max(100 * this.data.total / first.sales))
                // }

                show_label.map((item, index) => {
                    const prev = show_label[index - 1]
                    const min = prev ? prev.sales : 0;
                    const percent = (this.data.total - min) / (item.sales - min)
                    const result = {
                        min: min,
                        max: item.sales,
                        sales_label: item.sales_label,
                        discount_label: item.discount_label,
                        level: index + 1,
                        percent: 100 * Math.min(1, Math.max(0, percent)),
                    }
                    list.push(result);
                });

                return list;

            } else {
                return []
            }
        },

        labelLevel () {
            const level = parseInt(this.data.level) || 1;
            if (level >= 6) {
                return level;
            } else {
                const pass = this.findLast(this.showLabel, i => this.data.total >= i.min)
                const level = pass ? pass.level : 1;
                if (level > 5) {
                    return 5.5
                } else {
                    return Math.max(1, level);
                }
            }
        },

        activeLabel () {
            return this.showLabel[this.data.level - 1] || {}
        },

        percentageLevel () {
            return parseInt(this.data.level) || 1;
        },

        percentageDiscount () {
            const label = this.showLabel.find(i => i.level == this.percentageLevel - 1)
            return label ? label.discount_label + ' off' : '0% off'
        },

        percentageTotal () {
            let num = (this.data || {}).total || 0;
            return (num / 100).toFixed(2);
        },
        totalLength () {
            let str = this.percentageTotal + "";
            return str.length;
        },
        percentage () {
            let num = this.percentageTotal;
            let obj = {
                stage1: 0,
                stage2: 0,
                stage3: 0,
                stage4: 0,
                stage5: 0,
            };
            if (num < 1000) {
                obj.stage1 = (num / 1000).toFixed(2) * 100;
            } else if (num < 3000) {
                obj.stage1 = 100;
                obj.stage2 = (num / 3000).toFixed(2) * 100;
            } else if (num < 7000) {
                obj.stage1 = 100;
                obj.stage2 = 100;
                obj.stage3 = (num / 7000).toFixed(2) * 100;
            } else if (num < 25000) {
                obj.stage1 = 100;
                obj.stage2 = 100;
                obj.stage3 = 100;
                obj.stage4 = (num / 25000).toFixed(2) * 100;
            } else {
                obj.stage1 = 100;
                obj.stage2 = 100;
                obj.stage3 = 100;
                obj.stage4 = 100;
                obj.stage5 = (num / 50000).toFixed(2) * 100;
                if (obj.stage5 > 100) {
                    obj.stage5 = 100;
                }
            }
            return obj;
        },

        getLevelUrl () {
            let data = this.data || {};
            let level = data.level;
            let str = "";
            if (level && level != 1) {
                str = parseInt(level) - 1;
            }
            return str;
        },
    },
    methods: {
        //获取月份全称
        getMonthAllName (diff) {
            var month = new Date().getMonth(); //当前月：0-11
            var real = (month + diff + 12) % 12;
            let result = [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December",
            ]
            return result[real];
        },

        findLast (arr, callback) {
            for (let index = arr.length - 1; index >= 0; index--) {
                const value = arr[index];
                if (callback(value, index, arr)) {
                    return value;
                }
            }
            return undefined;
        },
        close () {
            this.dialog = false;
        },
        getPriceFormat (val) {
            let value = parseFloat(val / 100) || 0;
            return parseFloat(value.toFixed(2));
        },
    },
    created () {
        // this.getLastMonth();
    },
};
</script>

<style scoped lang="scss">
.progress {
    box-sizing: border-box;
    padding: 40px 46px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

.progress-data {
    display: flex;
    flex-direction: column;
    flex: 724;

    &>h4 {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;

        a {
            font-weight: 400;
            color: #087196;
            cursor: pointer;
            text-decoration: underline;

            &:hover {
                color: #075e7d;
                text-decoration: none;
            }
        }
    }

    .progress-data-compute {
        margin-top: 18px;
        font-size: 24px;
        font-weight: normal;
        display: flex;
        flex-direction: row;
        align-items: center;

        &>strong {
            display: inline-block;
            flex: 1;
            height: 32px;
            line-height: 32px;
            border-radius: 6px;
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            padding: 0 8px;
            vertical-align: middle;
            position: relative;
            box-sizing: border-box;
            background: #f6f6f6;

            &::after {
                content: attr(label);
                position: absolute;
                top: 100%;
                margin-top: 12px;
                left: 0;
                right: 0;
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555;
                line-height: 14px;
            }

            &:first-child {
                margin-left: 0;
            }

            &:nth-child(5) {
                background: #ffffff;
                border: 1px solid #e6e6e6;
            }

            &:last-child {
                background: #ffffff;
                border: 1px solid #e6e6e6;
                color: #008552;

                &.level-2 {
                    color: #a88965;
                }

                &.level-3 {
                    color: #748391;
                }

                &.level-4 {
                    color: #cc930c;
                }

                &.level-5 {
                    color: #2e91b3;
                }

                &.level-6 {
                    color: #d5417a;
                }

                &.level-7 {
                    color: #9878d1;
                }
            }
        }

        &>span {
            width: 12px;
            height: 12px;
            margin: 0 8px;
            position: relative;

            &[text='+'] {
                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 12px;
                    height: 2px;
                    background-color: #c2c2c2;
                    border-radius: 1px;
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 2px;
                    height: 12px;
                    background-color: #c2c2c2;
                    border-radius: 1px;
                }
            }

            &[text='='] {
                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -6px;
                    margin-top: -3px;
                    width: 12px;
                    height: 2px;
                    background-color: #c2c2c2;
                    border-radius: 1px;
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -6px;
                    margin-top: 1px;
                    width: 12px;
                    height: 2px;
                    background-color: #c2c2c2;
                    border-radius: 1px;
                }
            }
        }
    }
}

.progress-result {
    box-sizing: border-box;
    flex: 206;
    margin-left: 58px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    h4 {
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #2e2e2e;
        line-height: 18px;
        max-width: 160px;
        text-align: center;
        margin-bottom: 8px;
    }

    figure {
        width: 100%;
        margin-bottom: 8px;
        max-width: 160px;
        position: relative;

        &::before {
            content: '';
            display: block;
            padding-bottom: 100%;
        }

        &>img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
    }

    p {
        font-size: 18px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
    }
}

.progress-data-graph {
    position: relative;
    padding-top: 100px;
    padding-bottom: 62px;

    &::before {
        content: 'Rewards unlocked';
        position: absolute;
        left: 0;
        top: 66px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 16px;
    }

    ul {
        display: flex;
        height: 24px;
        border-radius: 4px;
        position: relative;
        padding-right: 20px;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border-radius: 4px;
            border: 1px solid #e6e6e6;
        }

        li {
            position: relative;
            width: 25%;

            span {
                position: absolute;
                left: 100%;
                top: 100%;
                margin-top: 54px;
                transform: translateX(-50%);
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555;
                line-height: 14px;

                &::after {
                    content: '';
                    display: block;
                    width: 0px;
                    height: 0px;
                    border-left: 3px solid transparent;
                    border-right: 3px solid transparent;
                    border-bottom: 2px solid #555;
                    position: absolute;
                    top: -52px;
                    left: 50%;
                    transform: translate(-50%);
                }
            }

            figure {
                position: absolute;
                left: 100%;
                top: 100%;
                margin-top: 8px;
                transform: translateX(-50%);
                text-align: center;

                img {
                    width: 20px;
                    height: 24px;
                }

                em {
                    display: block;
                    margin-top: 6px;
                    font-size: 12px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #555;
                    line-height: 14px;
                    white-space: nowrap;
                }
            }

            strong {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                text-align: right;
                line-height: 34px;

                b {
                    position: absolute;
                    text-align: center;
                    top: 50%;
                    transform: translate(0, -50%);
                    right: 6px;
                    min-width: 18px;
                    height: 18px;
                    line-height: 18px;
                    padding: 0 4px;
                    white-space: nowrap;
                    background: #000000;
                    font-size: 12px;
                    color: #ffffff;
                    border-radius: 4px;
                    font-weight: normal;
                    display: none;

                    &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        right: -3px;
                        transform: translate(0, -50%);
                        width: 0;
                        height: 0;
                        border-top: 4px solid transparent;
                        border-left: 6px solid #000;
                        border-bottom: 4px solid transparent;
                        border-radius: 2px;
                    }
                }
            }

            &:nth-child(1) {
                strong {
                    border-radius: 5px 0 0 5px;
                }

                b {
                    right: auto;
                    left: 100%;
                    margin-left: 6px;

                    &:after {
                        left: -3px;
                        border-style: solid;
                        border-width: 4px 6px 4px 0;
                        border-color: transparent #000 transparent transparent;
                        right: auto;
                    }
                }
            }

            // &:nth-child(2) {
            //     width: 20.94%;
            // }
            // &:nth-child(3) {
            //     width: 17.15%;
            // }
            // &:nth-child(4) {
            //     width: 13.36%;
            // }
            // &:nth-child(5) {
            //     width: 3%;
            // }

            &:nth-child(n + 5) {
                display: none;
            }

            &.active {
                strong b {
                    display: block;
                }

                figure {
                    &::before {
                        content: '';
                        display: block;
                        width: 20px;
                        height: 24px;
                        margin: 0 auto;
                        background-image: url(@/assets/images/dashboard/dashboard-progress-gray.png);
                        background-size: 100% 100%;
                    }

                    img {
                        display: none;
                    }
                }

                &~li {
                    figure {
                        display: none;
                    }

                    span {
                        display: none;
                    }
                }

                //
            }

            // &[grey] {
            //     figure img {
            //         filter: grayscale(100%);
            //         filter: gray;
            //     }
            // }
        }

        &[level='1'] {
            li strong {
                background: #23b98f;
            }
        }

        &[level='2'] {
            li strong {
                background: #d9b994;
            }
        }

        &[level='3'] {
            li strong {
                background: #b3bfcc;
            }
        }

        &[level='4'] {
            li strong {
                background: #e3c066;
            }
        }

        &[level='5'] {
            li strong {
                background: #43b9e2;
            }

            li:nth-child(1),
            li:nth-child(2),
            li:nth-child(3) {
                display: none;
            }

            li:nth-child(4) {
                strong {
                    border-radius: 5px 0 0 5px;
                }
            }

            li:nth-child(5) {
                flex: 1;
                display: block;

                figure {
                    display: none;
                }

                span {
                    margin-top: 18px;

                    &::after {
                        top: -16px;
                    }
                }
            }
        }

        &[level='5.5'],
        &[level='6'],
        &[level='7'] {
            li {
                strong {
                    background: #43b9e2;
                }
            }

            li:nth-child(1),
            li:nth-child(2),
            li:nth-child(3),
            li:nth-child(4),
            li:nth-child(5) {
                display: none;
            }

            li:nth-child(6) {
                display: block;
                flex: 1;

                strong {
                    width: 50% !important;
                    border-radius: 5px;

                    b {
                        display: block;
                    }
                }

                span {
                    display: block !important;
                    top: 100%;
                    left: 0;
                    transform: none;
                    margin-top: 18px;

                    &:after {
                        display: none;
                    }
                }

                figure {
                    display: none;
                }
            }
        }

        &[level='6'] {
            li {
                strong {
                    background: #ef5a94;
                }
            }
        }

        &[level='7'] {
            li {
                strong {
                    background: #9878d1;
                }
            }
        }
    }
}

// .progress-data-graph {
//     position: relative;
//     padding-bottom: 100px;
//     dl {
//         box-sizing: border-box;
//         position: relative;
//         display: flex;
//         flex-direction: row;
//         background: #f5f5f5;
//         border-radius: 4px;

//         &:before {
//             content: '';
//             position: absolute;
//             left: 0;
//             top: 0;
//             right: 0;
//             bottom: 0;
//             border: solid #e6e6e6 1px;
//             border-radius: 4px;
//         }
//         > dt {
//             display: block;
//             padding: 3;
//             position: relative;
//             &::after {
//                 content: '';
//                 display: block;
//                 width: 4px;
//                 height: 4px;
//                 position: absolute;
//                 left: 100%;
//                 transform: rotate(45deg);
//             }
//         }
//         dd {
//             height: 34px;
//             box-sizing: border-box;
//             position: relative;
//             &:nth-child(2),
//             &:nth-child(3) {
//                 border-left: none;
//                 border-right: none;
//             }
//             &:first-child {
//                 border-radius: 4px 0 0 4px;
//                 width: 45.55%;
//                 border-right: none;
//                 .progress-data-graph-fulfil {
//                     border-radius: 4px 0 0 4px;
//                 }
//             }
//             &:nth-child(2) {
//                 width: 20.94%;
//             }
//             &:nth-child(3) {
//                 width: 17.15%;
//             }
//             &:nth-child(4) {
//                 width: 13.36%;
//             }
//             &:nth-last-child(2) {
//                 border-left: none;
//                 border-radius: 0 4px 4px 0;
//             }
//             &:last-child {
//                 border-radius: 4px;
//             }

//             &[type='level4'] {
//                 width: 3%;
//                 display: block;
//                 .progress-data-graph-fulfil {
//                     border-radius: 4px;
//                 }
//                 .progress-data-graph-level {
//                     display: none;
//                 }
//             }

//             .progress-data-graph-fulfil {
//                 position: absolute;
//                 top: 0;
//                 left: 0;
//                 height: 100%;
//                 width: 0%;
//                 background: #23b98f;
//                 &::after {
//                     text-align: center;
//                     content: attr(label);
//                     display: none;
//                     position: absolute;
//                     top: 50%;
//                     right: 6px;
//                     transform: translate(0, -50%);

//                     min-width: 18px;
//                     padding: 0 4px;
//                     white-space: nowrap;
//                     // width: 42px;
//                     background: #000000;
//                     font-size: 12px;

//                     color: #ffffff;
//                     border-radius: 2px;
//                 }

//                 &::before {
//                     content: '';
//                     display: none;
//                     position: absolute;
//                     top: 50%;
//                     right: 2px;
//                     transform: translate(0, -50%);
//                     width: 0;
//                     height: 0;
//                     border-top: 4px solid transparent;
//                     border-left: 6px solid #000;
//                     border-bottom: 4px solid transparent;
//                     border-radius: 2px;
//                 }

//                 &.toright {
//                     &::after {
//                         left: 100%;
//                         margin-left: 6px;
//                         right: auto;
//                     }
//                     &::before {
//                         left: 100%;
//                         margin-left: 2px;
//                         border-style: solid;
//                         border-width: 4px 6px 4px 0;
//                         border-color: transparent #000 transparent transparent;
//                         right: auto;
//                     }
//                 }
//             }

//             .progress-data-graph-level {
//                 width: 52px;
//                 // z-index: 1;
//                 display: flex;
//                 flex-direction: column;
//                 align-items: center;
//                 left: 100%;
//                 top: 100%;
//                 position: absolute;
//                 font-size: 14px;

//                 color: #000000;
//                 transform: translate(-50%);
//                 figure {
//                     width: 22px;
//                     margin: 8px 0 4px;
//                     img {
//                         width: 100%;
//                     }
//                 }
//             }
//             > p {
//                 // z-index: 1;
//                 width: 52px;
//                 text-align: center;
//                 position: absolute;
//                 left: 100%;
//                 bottom: 100%;
//                 transform: translate(-50%);
//                 font-size: 14px;

//                 color: #000000;

//                 margin-bottom: 10px;

//                 &::after {
//                     content: '';
//                     display: block;
//                     width: 0px;
//                     height: 0px;
//                     border-left: 4px solid transparent;
//                     border-right: 4px solid transparent;
//                     border-top: 3px solid #555;
//                     position: absolute;
//                     bottom: -8px;
//                     left: 50%;
//                     transform: translate(-50%);
//                 }
//                 // &[type="last"] {
//                 //   text-align: right;
//                 //   transform: translate(-100%);
//                 //   &::after {
//                 //     right: 0;
//                 //     left: auto;
//                 //     transform: translate(0);
//                 //   }
//                 // }
//             }
//         }
//     }

//     button {
//         position: absolute;
//         bottom: 0;
//         right: 0;
//         border: none;
//         padding: 0;
//         text-decoration: underline;
//         font-size: 14px;

//         height: 16px;
//         font-weight: normal;
//         color: #555555;
//         &:hover {
//             color: #ea4c89;
//         }
//     }
// }

.progress-dialog::v-deep .dialog-content {
    max-width: 732px;
    font-size: 14px;
    color: #555555;
    box-sizing: border-box;
    padding: 32px;

    h3 {
        font-size: 22px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 26px;
        margin-bottom: 8px;

        &+p {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #292929;
            line-height: 20px;
        }
    }

    .progress-dialog-points {
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 12px;
        color: #292929;
        line-height: 20px;
        margin-top: 8px;

        span {
            display: block;

            &+span {
                margin-top: 12px;
            }
        }

        strong {
            display: block;
            margin-top: 12px;
        }

        em {
            display: block;
            font-style: italic;
            color: #555555;
            margin-top: 6px;

            &+span {
                margin-top: 12px;
            }
        }
    }

    h4 {
        margin-top: 12px;
        font-size: 12px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        margin-bottom: 8px;
    }

    h5 {
        margin-top: 12px;
        font-size: 12px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        margin-bottom: 8px;
    }

    figure {
        width: 100%;
        max-width: 640px;
        margin-bottom: 12px;
        position: relative;

        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        &::before {
            content: '';
            display: block;
            padding-bottom: 20.3%;
        }
    }

    p {
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 20px;

        &+p {
            margin-top: 10px;
        }
    }

    table {
        margin-top: 12px;
        width: 100%;
        max-width: 640px;
        margin-bottom: 28px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
        }

        th {
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            background: #fafafa;
            width: 128px;
            font-size: 12px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            padding: 0 12px;
            text-align: center;
        }

        td {
            height: 40px;
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #212121;
            text-align: center;

            &:last-child {
                border-right: none;
            }

            img {
                width: 30px;
            }
        }

        tr:first-child th {
            border-top-left-radius: 8px;
        }

        tr:last-child {
            th {
                border-bottom-left-radius: 8px;
            }

            th,
            td {
                border-bottom: none;
            }
        }
    }
}
</style>
